<template>
    <!-- 自定义面包屑导航 -->
    <div class="tzBreadcrumb">
        <a class="name" v-for='(item, index) in pathArr' :key="index" :pathArr='pathArr' href="javascript:;" @click="nav(item.url, index)" v-if='pathArr != ""'>
          {{item.name}}
          <img src="./../../public/img/sort-right.png">
        </a>
        <div class="name" v-for='(item, index) in title' :key="index" v-if='pathArr == "" || !pathArr'>
          {{item}}
          <img src="./../../public/img/sort-right.png">
        </div>
    </div>
</template>

<script>
export default {
  name: 'tzBreadcrumb',
  data: function () {
    return {};
  },
  methods: {
    nav (url, index) {
      if (index === 0 || index === this.pathArr.length || url === '') {
        return false;
      } else {
        console.log(url);
        this.$router.push(url);
      };
    }
  },
  props: {
    title: Array,
    pathArr: Array
  }
};
</script>

<style lang="stylus" scoped>
.tzBreadcrumb
  display: inline-block
  padding: 14px 20px
  box-sizing: border-box
  background: #fff
  box-shadow: 1px 1px 1px #999
  .name
    display: inline-block
    font-size: 12px
    color: #ccc
    img
      width: 7px
      height: 7px
      margin: 0 15px
  a:last-child>img
    display: none
  a:last-child
    color: #36ADCB
  div:last-child>img
    display: none
  div:last-child
    color: #36ADCB
</style>
